﻿// Ensure that the Mst namespace has been defined
if (window.Mst === undefined) {
    window.Mst = {};
}

Mst.SeoMenu = function (id, menuClass, itemClass, flyoutLinkClass, flyoutClass, flyoutRegionClass, onOpenClick, onCloseEvent) {
    this.Control = $('#' + id);

    // CSS classes
    this._menuClass = "." + menuClass;
    this._itemClass = "." + itemClass;
    this._flyoutLinkClass = "." + flyoutLinkClass;
    this._flyoutClass = "." + flyoutClass;
    this._flyoutRegionClass = "." + flyoutRegionClass;
    //    this._StageControl = $('.stage-content');
    //    this._flyoutHeight = 0;
    this._stageExpand = false;
    // BI Functions
    this._onOpenClick = onOpenClick;
    this._onCloseEvent = onCloseEvent; // Pass in the blade item that was closed

    // Wire up events           
    this.Control.find(this._flyoutLinkClass)
        .click($.proxy(this.ItemClick, this))
        .keydown($.proxy(this.ItemKeyDown, this));

    var flyouts = this.Control.find(this._flyoutClass).toArray();
    var i;
    for (i in flyouts) {
        $(flyouts[i]).find('a:last')
            .keydown($.proxy(this.LastLinkKeyDown, this));
    }

    $(document)
        .click($.proxy(this.DocClick, this));
};

Mst.SeoMenu.prototype = {


    DocClick: function (e) {
        var item = this.Control.find('.selected');
        if (item.size() > 0) {
            var contains = $.contains(item.get(0), e.target);
            if (!contains) {
                this.HideFlyouts();
                //TODO: Reset the focus
            }
        }
    },

    ItemClick: function (e) {
        if (!$(e.target).hasClass("mstLcp_DualLangLink")) {

            e.preventDefault();

            if (this.IsFlyoutVisible(e)) {
                this.HideFlyouts();
            } else {
                this.HideFlyouts();
                this.ShowFlyout(e);

                if (this._onOpenClick != null) {
                    // Click BI Impression
                    this._onOpenClick(e);
                }
            }
        }
    },

    ItemKeyDown: function (e) {
        if (e.which == 9) {
            if (e.shiftKey) {
                this.HideFlyouts();
                //TODO: Reset the focus
            }
        }
    },

    LastLinkKeyDown: function (e) {
        if (e.which == 9) {
            if (!e.shiftKey) {
                this.HideFlyouts();
                //TODO: Reset the focus
            }
        }
    },

    IsFlyoutVisible: function (e) {
        return $(e.target).parents(this._itemClass).find(this._flyoutClass).css('display') != 'none';
    },

    ShowFlyout: function (e) {
        var flyout = $(e.target).parents(this._itemClass).addClass('selected').find(this._flyoutClass);

        this.PositionFlyout(flyout);

        if (!this._stageExpand) {
            $(".stage-content").animate({ height: $('.stage-content').outerHeight() + $(this._flyoutClass).outerHeight() }, 300);
            //$('.stage-content').height($('.stage-content').outerHeight() - $(this._flyoutClass).outerHeight());
            $("html").animate({ scrollTop: $(document).height() }, 300);
            this._stageExpand = true;
        }

        if (jQuery.browser.opera || (jQuery.browser.msie && document.documentMode <= 7)) {
            flyout.show();
        } else {
            flyout.slideDown(300); // Animates in latest browsers
        }
    },

    HideFlyouts: function (e) {
        var This = this;
        if (this._stageExpand) {
            $(".stage-content").animate({ height: $('.stage-content').outerHeight() - $(this._flyoutClass).outerHeight() }, 300);
            // $('.stage-content').height($('.stage-content').outerHeight() - $(this._flyoutClass).outerHeight());
            this._stageExpand = false;
        }

        //TODO: this should only act on visible menus
        if (jQuery.browser.opera || (jQuery.browser.msie && document.documentMode <= 7)) {
            $(this._flyoutClass, this.Control).hide();
        } else {
            $(this._flyoutClass, this.Control).slideUp(300, function () {
                This.fixFlyoutContentOldIE(); // Animates in latest browsers
           });
        }
        
        if (this._onCloseEvent != null) {
            $(this._itemClass).filter('.selected').each(function () {
                This._onCloseEvent($(this).find(This._flyoutLinkClass));
            });
        }

        $(this._itemClass).removeClass('selected');



    },


    fixFlyoutContentOldIE: function () {
        // Workaround for IE6 & IE7 -- fix display of these items by re-asserting the display value.  Weird, but it works.
        var that, suggestions, sources, display;

        if ($.browser.msie && (parseInt($.browser.version) <= 7)) {
            that = this;
            setTimeout(function () {
                img = that.Control.find(".bg-img");
                display = img.css("display");
                img.css("display", "");
                img.css("display", display);
            }, 1);
        }
    },

    isIE6: function () {
        return (navigator.appVersion.indexOf("MSIE 6.") != -1);
    },

    PositionFlyout: function (e) {

        //TODO: Clean up this code and comment
        var left = 'left';
        var itemWidth = e.parents(this._itemClass).width();
        //itemWidth:73
        //alert(e.parents(this._itemClass).attr('class'));
        //alert(this._itemClass);
        //alert("itemWidth:" + itemWidth.toString());
        var itemPosition = e.parents(this._itemClass).position().left;
        //alert("itemPosition:" + itemPosition.toString())
        //itemPosition:310
        var flyoutWidth = e.outerWidth();
        //"flyoutWidth:777"
        //alert("flyoutWidth:" + flyoutWidth.toString());
        //alert("flyoutWidth:" + e.attr('class').toString());

        var bladeWidth = e.parents(this._menuClass).width();
        //alert("bladeWidth:" + bladeWidth.toString());
        var bladePosition = e.parents(this._menuClass).position().left;
        //alert("bladePosition:" + e.parents(this._menuClass).attr('class').toString());
        bladeWidth = 920;
        bladePosition = 0;

        var headWidth = bladeWidth;
        if (e.parents(this._flyoutRegionClass).size() > 0) {
            headWidth = e.parents(this._flyoutRegionClass).innerWidth();
        }

        //headWidth = 918;

        // Calculate offset
        var offsetLeft = itemPosition + bladePosition;
        var offsetRight = bladeWidth - itemPosition - itemWidth;
        if (document.documentElement.dir == 'ltr') {
            offsetRight += 18;
        }

        //alert(offsetLeft); //310
        // alert(offsetRight); //536

        if (document.documentElement.dir == 'rtl') {
            left = 'right'
            itemWidth -= 2;
            offsetRight = headWidth - itemPosition - itemWidth;

            var temp = offsetLeft;
            offsetLeft = offsetRight;
            offsetRight = temp;
        }
        if (offsetRight < 0) {
            offsetRight = 0;
        }
        if (offsetLeft < 0) {
            offsetLeft = 0;
        }

        // Position flyout
        var posLeft = 0;
        if (flyoutWidth <= (itemWidth + offsetRight)) {
            // Dock to Left hand side
            e.css(left, posLeft);
            e.addClass('dock-left');
        } else if (flyoutWidth < itemWidth + offsetLeft) {

            // Dock to Right hand side
            if (document.documentElement.dir == 'rtl') {
                posLeft = -flyoutWidth + itemWidth + 2;
            } else {
                posLeft = -flyoutWidth + itemWidth;
            }
            e.css(left, posLeft);
            e.addClass('dock-right');
        } else {

            if (flyoutWidth < (offsetLeft + offsetRight + itemWidth)) {
                // Dock to the far right side
                posLeft = -flyoutWidth + (offsetRight + itemWidth);
                if (document.documentElement.dir == 'rtl') {
                    posLeft -= 23;
                    if (this.isIE6()) {
                        posLeft += itemWidth;
                    }
                }
                e.css(left, posLeft);
            } else {
                // Dock to the far left side
                if (document.documentElement.dir == 'rtl') {
                    posLeft = -offsetLeft - 1;
                }
                else {
                    posLeft = -offsetLeft - 6;
                }
                e.css(left, posLeft);
            }
        }
    }
};


